<script setup lang="ts">
import axios from 'axios'
import { ChannelResData, ChannelItem } from '../types/data'
import {ref, onMounted} from 'vue'
// 从仓库中拿到channelId
import { useChannelStore } from '../stores/channel';
const store = useChannelStore()
// Ts的具体使用
// 1. 提出类型放在.d.ts中 按需导出 (根据接口返回数据 和 接口需要参数)
// 2. 调用接口的时候 引入类型来使用(参数, 返回值)
// 3. 定义的数据也需要类型规范 (引入.d.ts中的类型)

// 接收父组件传进来的id
// defineProps<{
//   channelId: number
// }>()

// 改变channelId  需要子传父
// const emit = defineEmits<{
//   (e: 'changeChannel', id: number): void
// }>()

// 创建一个响应式数据
const channels = ref<ChannelItem[]>([])

onMounted(async () => {
  const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  // 给响应式数据赋值
  channels.value = res.data.data.channels
})
// axios.request<ChannelResData>({
//   url: 'http://geek.itheima.net/v1_0/channels'
// }).then(res => {
//   console.log(res.data.data.channels[0].name)
// })
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: store.channelId === item.id }"
        href="javascript:;"
        v-for="item in channels"
        :key="item.id"
        @click="store.changeChannel(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
